<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/**css样式思路
			  1.统配选择器：微软雅黑、#f5f5f5
			  2.#product_cart:边框、内边距、外边距、阴影【透明.1】、文字居中
			  3.img 边框倒角、内外边距？【微调】
			  4.h3 颜色、内外边距？ 【微调】
			  		 5.p:字体大小、颜色
			  			 6.p+span:span、内外边距【微调】、颜色
			  			 */
			  			*{
			  				font-family: "Microsoft YaHei";
			  				background: #f5f5f5;
			  				margin: 0;
			  			}
			  			div{
			  				border: 1px solid #ddd;
			  				padding: 20px;
			  				margin: 10px;
			  				box-shadow: 0 2px 4px rgba(204, 204, 204, 1.0);
			  				text-align: center;
			  				background: #f5f5f5;
			  				width: 150px;
			  				height: 300px;
			  				border-radius: 5px;
			  			}
			  			img{
			  				border-radius: 5px;
			  				align:center;
			  			}
			  			h3{
			  				color: #333;
			  				text-align: center;
							font-size: 15px;
			  			}
			  			p1{
			  				padding: 2px;
			  				margin: 2px;
			  				color: #d52418;
			  				text-align: center;
			  				font-size: 10px;
			  			}
			  			p{
			  				padding: 5px;
			  				margin: 5px;
			  				color: #a8abb4;
			  				text: align center;
			  				font-size: 10px;
			  			}
			  		</style>
			  	</head>
			  	<body>
			  		<!-- 网页：1.html 结构【原生图分析】 -->
			  		<div id="product_card">
			  			<img src="img/小米SU7.jpg" width="150px" height="200px"  alt="汽车" />
			  			<h3>小米SU7</h3>
			  			<p1>¥279999.00</p1 >
			  			<p>已有<span>10万+</span>评价</p >
			  		</div>
			  	</body>
			  </html>